<template lang="">
	<div class="container" ref="container"> 
		<div class="forms-container">
		  <div class="signin-signup">

      <!-- 登录表单 -->
			<form action="#" class="sign-in-form">
			  <h2 class="title">登录</h2>
			  <div class="input-field">
				<i class="fas fa-user"></i>
				<input type="text" placeholder="邮箱" v-model="loginForm.email" />
			  </div>
			  <div class="input-field">
				<i class="fas fa-lock"></i>
				<input type="password" placeholder="密码"  v-model="loginForm.password"  />
			  </div>
			  <el-button type="primary" @click="login()">登录</el-button>
			</form>

      <!-- 注册表单 -->
			<form action="#" class="sign-up-form">
			  <h2 class="title">注册</h2>
			  <div class="input-field">
				<i class="fas fa-user"></i>
				<input type="text" v-model="registerFrom.username" placeholder="用户名" />
			  </div>
			  <div class="input-field">
				<i class="fas fa-envelope"></i>
				<input type="email" v-model="registerFrom.email" placeholder="邮箱" />
			  </div>
			  <div class="input-field">
				<i class="fas fa-lock"></i>
				<input type="password" v-model="registerFrom.password" placeholder="密码" />
			  </div>
			  <div class="input-field">
				<i class="fas fa-lock"></i>
				<input type="password" v-model="registerFrom.code" placeholder="验证码" />
			  </div>
			  <el-button type="primary" @click="getCode()">获取验证码</el-button>
			  <el-button type="primary" @click="register()">注册</el-button>
		</form>
		  </div>
		</div>
  
		<div class="panels-container">
		  <div class="panel left-panel">
			<div class="content">
			  <h3>新用户</h3>
			  <p>
				点击下方注册按钮加入我们吧!!
			  </p>
			  <button class="btn transparent" id="sign-up-btn"  @click="signUp()">
				注册
			  </button>
			</div>
			<img src="@/assets/images/svg/log.svg" class="image" alt="login" />
		  </div>
		  <div class="panel right-panel">
			<div class="content">
			  <h3>已注册用户</h3>
			  <p>
				  点击登录按钮,直接登录
			  </p>
			  <button class="btn transparent" id="sign-in-btn" @click="signIn()">
				登 录
			  </button>
			</div>
			<img src="@/assets/images/svg/register.svg" class="image" alt="register" />
		  </div>
		</div>
	  </div>
</template>
<script>
import { register,login,getCode } from "../../utils/user.js";
export default {
  data () {
    return {
      loginForm: {
        email: '',
        password: ''
      },
      registerFrom: {
        code: '',
        email: '',
        password: '',
        username: ''
      }

    }
  },
  methods: {
	//登录
    login () {
		let rex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
		if (!rex.test(this.loginForm.email)) {
			this.$message.warning('邮箱地址不合法！');
			return;
		}
		if (this.loginForm.password.length==0 && this.loginForm.password.length>12){
			this.$message.warning('密码不合法！');
			return;
		}
		login(this.loginForm).then(res=>{
			if(res.data.code==200){
				this.$message.success(res.data.msg);
				this.$cookies.set("token",res.data.data.token);
				localStorage.setItem("user",res.data.data.userId);
				this.$router.replace({
					name: "index"
				})
			}else{
				this.$message.error(res.data.msg);
			}
		})
		
    },
	//注册
    register () {
		let rex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
		if (!rex.test(this.registerFrom.email)) {
			this.$message.warning('邮箱地址不合法！');
			return;
		}
		if (this.registerFrom.username.length==0 || this.registerFrom.username.length>10 ) {
			this.$message.warning('用户名不合法！');
			return;
		}
		if (this.registerFrom.password.length==0 || this.registerFrom.password.length>12){
			this.$message.warning('密码不合法！');
			return;
		}
		if (this.registerFrom.code.length==0) {
			this.$message.warning('请填写邮箱验证码！');
			return;
		}
		register(this.registerFrom).then(res=>{
			if(res.data.code==200){
				this.$message.success(res.data.msg);
			}else{
				this.$message.error(res.data.msg);
			}
		})
    },
	//获取验证码
	getCode() {
		let rex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
		if (!rex.test(this.registerFrom.email)) {
			this.$message.warning('邮箱地址不合法！');
			return;
		}
		getCode(this.registerFrom).then(res=>{
			if(res.data.code==200){
				this.$message.success(res.data.msg);
			}else{
				this.$message.error(res.data.msg);
			}
		})
	},
    signUp () {
      this.$refs.container.classList.add("sign-up-mode");
    },
    signIn () {
      this.$refs.container.classList.remove("sign-up-mode");
    }
  },
}
</script>
<style lang="less" scoped>
@import url("./index.less");
</style>